<div class="xm-player-box" xmDrag (finished)="dragEnd($event)" (mouseenter)="hoverHost()">
  <div class="xm-player" #player>
    <div class="thumbnail">
      <img xmDragHandler [src]="(album$ | ngrxPush).cover || '../../../assets/images/default-pic.jpg'" />
    </div>
    <div class="middle">
      <div class="operate">
        <i class="icon icon-prev" xmIcon="previous" (click)="prev(currentIndex  -1)"></i>
        <i class="icon icon-toggle" (click)="togglePlay()" [xmIcon]="playing ? 'pause' : 'play'"></i>
        <i class="icon icon-next" xmIcon="next" (click)="next(currentIndex + 1)"></i>
      </div>
    </div>
    <div class="list" (click)="togglePanel(!showPanel)">
      <i class="icon" xmIcon="mulu"></i>
    </div>
    <div class="close" (click)="closed.emit()">
      <i class="icon" xmIcon="Close"></i>
    </div>
  </div>
  <div class="xm-player-panel" @playerPanel [class.down]="isDown" *ngIf="trackList.length && showPanel">
    <div class="panel-wrap">
      <ul>
        <li
          *ngFor="let item of trackList; index as i; trackBy: trackByTracks"
          [class.current]="item.trackId === (currentTrack$ | ngrxPush)?.trackId">
          <p class="title ellipsis" [title]="item.title" (click)="changePlay(i)">{{ item.title }}</p>
          <i class="icon" xmIcon="delete" (click)="delete(i)"></i>
        </li>
      </ul>
    </div>
  </div>
  <audio
    #audio
    [src]="(currentTrack$ | ngrxPush)?.src"
    (canplay)="canplay()"
    (ended)="ended()"
    (error)="error()">
  </audio>
</div>
